<template>
  <div class="legend-box" v-if="curMapIsLegend">
      <p class="legend-title">{{legendData.title}}</p>
      <ul class="legend-con" v-if="legendData.type">
        <li v-for="(item, index) in legendData.items" :key="index"><cite :class="item.background"></cite><span>{{item.label}}</span></li>
      </ul>
  </div>
</template>

<script>
export default {
  name: 'legend-wrap',
  computed:{
    curSubMenuActive(){
      return this.$store.getters.curSubMenuActive
    },
    curBtnGroupActive(){
      return this.$store.getters.curBtnGroupActive
    },
    legendData(){
      console.log(this.$store.getters['map/curMapData'].legendData)
      return this.$store.getters['map/curMapData'].legendData
    },
    curMapDrawUrl(){
      return this.$store.getters['map/curMapDrawUrl']
    },
    curMapIsLegend(){
      return this.$store.getters['map/curMapIsLegend']
    }
  },
  watch:{
    curMapDrawUrl(val){
      if(val == 'polygon' || val == 'raster'){
        // 如果是填色 就显示图例
         this.$store.dispatch('map/changeMapLegend',true);
      }else{
        this.$store.dispatch('map/changeMapLegend',false);
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
//at.alicdn.com/t/font_1151041_12q9jh9v5q7.css
@import url('//at.alicdn.com/t/font_1151041_swd3ln69mpe.css') 
.legend-box
  position absolute
  z-index 50
  right 32%
  bottom 100px
  // width 160px
  // height 140px
  padding 10px 
  background linear-gradient(to right, rgba(62,73,103,0.7), #303a58)

  .legend-title
    width 100%
    height 26px
    text-align left

  .legend-con
    li
      height 22px
      line-height 22px
      display flex
  .legend-con
    cite
      display inline-block
      width 30px
      height 15px
      // background red
      border-radius 3px
      vertical-align middle
      margin-top 4px
      
    span 
      display inline-block
      margin-left 6px
      line-height 22px
      font-size 14px
  
.legend-con
    cite.bg1
        background: #989797
.legend-con
    cite.bg2
        background: #E1E1E1
.legend-con
    cite.bg3
        background: #F9DCCC
.legend-con
    cite.bg4
        background: #E29071
.legend-con
    cite.bg5
        background: #A02B30

// 人口评价  空间
.legend-con
    cite.bg6
        background: #B3B3FB
.legend-con
    cite.bg7
        background: #FCEFCC
.legend-con
    cite.bg8
        background: #E3A7BE
// 人口评价  时间
.legend-con
    cite.bg9
        background: #BDE8FB
.legend-con
    cite.bg10
        background: #F5EBDF
.legend-con
    cite.bg11
        background: #FEBEBE
		
// 人口评价  时空变化趋势		
.legend-con
    cite.bg12
        background: #2892C7
.legend-con
    cite.bg13
        background: #82B3A7
.legend-con
    cite.bg14
        background: #CADB84
.legend-con
    cite.bg15
        background: #FAFA64
.legend-con
    cite.bg16
        background: #FCE158 
.legend-con
    cite.bg17
        background: #FCCE4E 
.legend-con
    cite.bg18
        background: #FCB644  
.legend-con
    cite.bg19
        background: #F7722A 
.legend-con
    cite.bg20
        background: #ED361A             
</style>
